import { createWebHashHistory, createRouter, RouteRecordRaw } from "vue-router";
import layout from "@/layout/Index.vue";
import Test from "@/views/Test.vue";
import NotFound from "@/views/error/Index.vue";

// 组件
export const components: RouteRecordRaw[] = [
  {
    path: "html",
    name: "html",
    component: () => import("@/views/html/Index.vue"),
    meta: {
      title: "HTML",
      icon: "",
      img: "html.png",
      groupName: "",
    },
  },
  {
    path: "html/details",
    name: "html-details",
    component: () => import("@/views/html/Details.vue"),
    meta: {
      title: "详情",
      icon: "",
      img: "",
      groupName: "",
      isNotMenu: true,
    },
  },
  {
    path: "vue2",
    name: "vue2",
    component: () => import("@/views/vue2/Index.vue"),
    meta: {
      title: "vue2",
      icon: "",
      img: "vue.png",
      groupName: "",
    },
  },
  {
    path: "vue2/details",
    name: "vue2-details",
    component: () => import("@/views/vue2/Details.vue"),
    meta: {
      title: "详情",
      icon: "",
      img: "",
      groupName: "",
      isNotMenu: true,
    },
  },
  {
    path: "vue3",
    name: "vue3",
    component: () => import("@/views/vue3/Index.vue"),
    meta: {
      title: "vue3",
      icon: "",
      img: "vue3.png",
      groupName: "",
    },
  },
  {
    path: "vue3/details",
    name: "vue3-details",
    component: () => import("@/views/vue3/Details.vue"),
    meta: {
      title: "详情",
      icon: "",
      img: "",
      groupName: "",
      isNotMenu: true,
    },
  },
];

// JavaScript
export const javascripts: RouteRecordRaw[] = [
  {
    path: "js/details",
    name: "jsDetails",
    component: () => import("@/views/javascript/Index.vue"),
    meta: {
      title: "JavaScript",
      icon: "",
      img: "",
      groupName: "",
    },
  },
];

// MarkDown
export const markdowns: RouteRecordRaw[] = [
  {
    path: "markdown/details",
    name: "MarkDownDetails",
    component: () => import("@/views/markdown/Index.vue"),
    meta: {
      title: "MarkDown",
      icon: "",
      img: "",
      groupName: "",
    },
  },
];

export const routes: RouteRecordRaw[] = [
  {
    path: "/component",
    name: "component",
    component: layout,
    redirect: "/component/html",
    children: [...components],
  },
  {
    path: "/javascripts",
    name: "javascripts",
    component: layout,
    redirect: "/javascripts/js/details",
    children: [...javascripts],
  },
  {
    path: "/markdowns",
    name: "markdowns",
    component: layout,
    redirect: "/markdowns/markdown/details",
    children: [...markdowns],
  },
  {
    path: "/test",
    name: "test",
    component: Test,
  },
  // 404 路由 - 注意这里的 path 是一个通配符 *
  {
    path: "/:pathMatch(.*)*",
    name: "NotFound",
    component: NotFound,
  },
];
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// 此处没有使用to、form所有带有下划线，如果编辑器会提示
router.beforeEach((to, _from, next) => {
  if (to.path == "/") {
    next("/component");
  }
  next();
});

export default router;
